<template>
  <div class="bfc my-mentor">
      <!-- 支持受控用法 ，也支持非受控用法 -->
      <div class="teacher-list" v-if="data.my_mentor_id === null">
        <t-table row-key="id" :columns="columns" :data="data.teacherList">
          <template #studentNumber="{ row }">
            <p v-if="row.studentNumber < 5" class="safe status">已带 {{row.studentNumber}} / 10 人</p>
            <p v-if="row.studentNumber >= 5 && row.studentNumber < 8" class="status warning">已带 {{row.studentNumber}} / 10 人（将满）</p>
            <p v-if="row.studentNumber >= 8" class="status filled">已带 {{row.studentNumber}} / 10人（已满）</p>
          </template>
          <template #operation="slotProps">
            <t-button theme="primary" @click="handleSelectTeacher(slotProps)" v-if="slotProps.row.studentNumber < 10"> 选择 </t-button>
            <t-button theme="danger" disabled v-else> 已满 </t-button>
          </template>
        </t-table>
      </div>
    <div class="teacher-info" v-else>
      <p>我的导师：</p>
      <t-card  bordered :style="{ width: '400px', marginLeft: '20px' }">
        <template #avatar>
          <t-avatar size="100px">{{data.my_mentor.name}}</t-avatar>
        </template>
        <template #actions>
          <t-tag theme="success">{{ data.my_mentor.rank }}</t-tag>
        </template>
        <p>{{ infoMessage }}</p>
        <p>电话：{{data.my_mentor.tel}}</p>
        <div class="student_list">
          <p>已带学生：{{data.my_mentor.studentList.length}} / 10人</p>
        </div>
      </t-card>
    </div>
    <t-dialog
        v-model:visible="visible"
        theme="info"
        header="提示"
        body="确定选择该导师吗？"
        @confirm="onClickConfirm"
    />
    </div>
</template>

<script setup lang="ts">
import {MessagePlugin} from 'tdesign-vue-next';
import {getTeacherList, selectTeacher, getSingleTeacherInfo} from "../../api/index";
import {onMounted, reactive} from "vue";
import { computed } from 'vue';
import { ThumbUpIcon, ChatIcon, ShareIcon, UserIcon } from 'tdesign-icons-vue-next';
import { ref, nextTick} from 'vue';

const infoMessage = "教师描述：Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur repellendus explicabo doloremque distinctio ipsa facere consequuntur, velit rem illum neque quas nemo, alias ipsam autem laborum adipisci natus quibusdam nam?"
type Teacher ={
  name: String,
  rank: String,
  tel: String,
  studentNumber?: number,
  studentList: []
}
const data = reactive({
  teacherList: <any>[],
  my_mentor_id: '',
  my_mentor: {
    name: '',
    rank: '',
    tel: '',
    studentList: []
  },
  currentId: ''
})


const visible = ref(false);

onMounted(()=>{
  data.my_mentor_id = JSON.parse(<string>sessionStorage.getItem("userInfo")).mentorId;
  data.my_mentor = JSON.parse(<string>sessionStorage.getItem("my_teacher"));
  //如果学生没有选导师
  if(data.my_mentor_id === null){
    getTeacherList().then(res=>{
      MessagePlugin.success(res.data.msg);
      res.data.teacherList.forEach((i:Teacher)=>{
        i.studentNumber = i.studentList.length;
        data.teacherList.push(i);
      })
    }).catch(error=>{
      MessagePlugin.error(error);
    })
  } else {
    //没有教师信息缓存
    if(!data.my_mentor){
      getSingleTeacherInfo(data.my_mentor_id).then(res=>{
        MessagePlugin.success(res.data.msg);
        data.my_mentor = res.data.teacherInfo;
        sessionStorage.setItem("my_teacher", JSON.stringify(data.my_mentor))
      })
    }
  }
})

function close(){
  visible.value = false;
}
function onClickConfirm(){
  let u = JSON.parse(<string>sessionStorage.getItem("userInfo"));
  selectTeacher(u._id, data.currentId).then((res)=>{
    if(res.data.code === 1){
      data.my_mentor_id = data.currentId;
      u.mentorId = data.currentId;
      sessionStorage.setItem("userInfo", JSON.stringify(u));
      sessionStorage.setItem("my_teacher", JSON.stringify(res.data.teacherInfo));
      data.my_mentor = res.data.teacherInfo;
    } else{
      MessagePlugin.error(res.data.msg);
    }
  })
  MessagePlugin.success("成功选择导师！");
  visible.value = false;
}


const columns = [
  { colKey: 'account', title: '工号', width: 150},
  { colKey: 'name', title: '教师姓名', width: 150 },
  {
    colKey: 'studentNumber',
    title: '已带学生',
    width: 200,
  },
  {
    colKey: 'operation',
    title: '操作',
    width: 100,
    cell: 'operation',
  },
];

function handleSelectTeacher(e:any){
  visible.value = true;
  data.currentId = e.row._id;
}
</script>

<style scoped>
.teacher-list{
  width: 800px;
  padding: 50px;
  margin: 20px auto;
  box-shadow: 0 0 5px #ccc;
}
.status{
  font-weight: 700;
}
.safe{
  color: #00a870;
}
.warning{
  color: #ed7b2f;
}
.filled{
  color: #e34d59;
}
.teacher-info{
  padding: 20px;
}
</style>
